import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { global as globalDuck } from 'ducks'
import ListTable from 'components/ListTable'
import getOrgsPageInfo from 'graphql/org/getOrgsPageInfo.graphql'
import getOrgs from 'graphql/org/getOrgsByUser.graphql'
import Icons from 'utils/constents/icons'
import { PaddingContainer } from 'components/containers'

const dataOpts = [
  {
    src: Icons.EDIT,
    text: '编辑',
  },
  {
    src: Icons.DELETE,
    text: '删除',
  },
]

const FileList = () => ({ data }) => (
  <React.Fragment>
    {data.org_member.map(member => (
      <ListTable.Row hasCheckBox>
        <ListTable.Avatar
          src={member.owner_object.avatar}
          text={member.owner_object.name}
          url={
            member.role === 'owner' || member.role === 'admin'
              ? `/org/${member.owner_object.name}/dashboard`
              : `/org/${member.owner_object.name}/project`
          }
        />
        <ListTable.Cell>{member.role}</ListTable.Cell>
        <ListTable.Cell>{member.create_at}</ListTable.Cell>
        <ListTable.Action width={2} options={dataOpts} />
      </ListTable.Row>
    ))}
  </React.Fragment>
)

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { user } = this.props
    const RenderList = FileList()
    const inviteUrl = ''
    return (
      <PaddingContainer>
        <ListTable
          nav={{
            path: '',
            homeText: '组织列表',
            homePath: '/org',
          }}
          globalActions={[]}
          search={{ text: '搜索组织' }}
          sort
          pagination={{
            query: getOrgsPageInfo,
            name: 'org_member_aggregate',
            variables: {
              userId: user.id,
            },
          }}
          listData={{
            query: getOrgs,
            variables: {
              userId: user.id,
              order: [],
              limit: 10,
            },
            header: (
              <ListTable.Header hasCheckBox>
                <ListTable.HeaderCell
                  style={{
                    wordBreak: 'keep-all',
                    whiteSpace: 'nowrap',
                  }}
                >
                  名称
                </ListTable.HeaderCell>
                <ListTable.HeaderCell />
                <ListTable.HeaderCell>角色</ListTable.HeaderCell>
                <ListTable.HeaderCell>加入时间</ListTable.HeaderCell>
                <ListTable.HeaderCell />
              </ListTable.Header>
            ),
            render: <RenderList />,
          }}
          holder={{
            description: '没有加入任何组织',
            action: {
              text: '邀请成员',
              url: inviteUrl,
            },
          }}
        />
      </PaddingContainer>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(DatasetData)
